<template>
  <!-- 近8小时用电/水走势 -->
  <div class="chart-box2">
    <div class="chart-title w-100p">
      <a-row class="w-100p" type="flex" align="middle" justify="space-between">
        <a-col>近8小时用电/水走势</a-col>
        <a-col>
          <small-tab
            :tabList="tabList"
            :activeKey="activeTab"
            @change="handleTabChange"
          />
        </a-col>
      </a-row>
    </div>
    <div class="chart-content">
      <div class="chart-container" :id="chartId"></div>
    </div>
  </div>
</template>

<script>
import {
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  onBeforeUnmount,
  nextTick,
  watch,
  toRaw,
} from "vue";
import { Chart, registerTheme } from "@antv/g2";
import common from "../../utils/common";
import SmallTab from "../common/SmallTab.vue";
import store from "../../../../store";

export default defineComponent({
  name: "EnergyTrend",
  components: { SmallTab },
  setup() {
    const state = reactive({
      chartId: "energyTrendChart",
      chart: null,
      activeTab: "el",
      tabList: [
        { key: "el", title: "用电" },
        { key: "water", title: "用水" },
      ],
      data: { el: [], water: [] },
      list: [],
    });

    const handleTabChange = (e) => {
      const { key } = e;
      state.activeTab = key;
      state.list = state.data[key];
      state.chart.changeData(state.list);
      setChartAnnotation();
    };

    const initChart = () => {
      const data = state.list;

      state.chart = new Chart({
        container: state.chartId,
        autoFit: true,
        theme: "chartTheme",
        padding: [20, 20, 20, 40],
      });

      state.chart.data(data);

      state.chart.scale({
        value: {
          nice: true,
        },
      });

      state.chart
        .line()
        .position("time*value")
        .tooltip("time*value", (time, value) => {
          return {
            name: state.activeTab == "el" ? "用电量" : "用水量",
            value: value + (state.activeTab == "el" ? "kw·h" : "㎡"),
          };
        });

      setChartAnnotation(data);
    };

    const setChartAnnotation = () => {
      state.chart.annotation().clear(true);
      const { min, max } = common.findMaxMin(state.list, "value");
      if (min && max) {
        state.chart.annotation().dataMarker({
          top: true,
          position: [max.time, max.value],
          text: {
            content: "峰值：" + max.value,
            style: {
              fill: common.theme.lightGreen,
              fontWeight: 600,
              fontSize: 14,
            },
          },
          line: {
            length: 50,
            style: {
              stroke: common.theme.lightGreen,
            },
          },
        });
        state.chart.annotation().dataMarker({
          top: true,
          position: [min.time, min.value],
          text: {
            content: "谷值：" + min.value,
            style: {
              fill: common.theme.primaryRed,
              fontWeight: 600,
              fontSize: 14,
            },
          },
          line: {
            length: 50,
            style: {
              stroke: common.theme.primaryRed,
            },
          },
        });
        state.chart.render();
      }
    };

    watch(
      () => store.getters.centerControl.Energy_recentlyHourTrend,
      (val) => {
        if (val) {
          getData();
        }
      }
    );

    const getData = () => {
      const { Energy_recentlyHourTrend } = store.getters.centerControl;
      if (Energy_recentlyHourTrend) {
        const { el, water } = Energy_recentlyHourTrend;
        state.data = Energy_recentlyHourTrend;
        state.list = state.data.el;
        if (state.chart) {
          state.chart.changeData(state.list);
          setChartAnnotation();
        } else {
          nextTick(() => {
            initChart();
          });
        }
      }
    };

    onMounted(() => {
      registerTheme("chartTheme", common.chartTheme);
      getData();
    });

    onBeforeUnmount(() => {
      const chartBox = document.getElementById(state.chartId);
      if (chartBox) {
        chartBox.innerHTML = "";
      }
    });
    return {
      ...toRefs(state),
      handleTabChange,
    };
  },
});
</script>

<style lang="less" scoped>
@import "../../styles/common.less";
</style>
